feat(avatar): support image fill mode in taro avatar component #3405
Conversation
github-actions
bot
added
3.x
Walkthrough新增 Avatar 的公有属性 Changes
Estimated code review effort🎯 3 (中等) | ⏱️ ~20 minutes Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Repository UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3405 +/- ##
==========================================
Coverage 88.15% 88.15%
==========================================
Files 291 291
Lines 19212 19212
Branches 2988 2988
==========================================
Hits 16937 16937
Misses 2269 2269
Partials 6 6 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/packages/avatar/demos/taro/demo10.tsx (1)
1-16: Demo 实现正确，展示了不同的图片填充模式Demo10 组件正确使用了新的
mode属性，展示了四种常用的图片填充模式。实现简洁清晰。可选建议：为了更好地展示不同 mode 的视觉效果
考虑使用一张非正方形的图片（例如宽高比明显不同的图片），这样可以更清楚地展示不同 mode 之间的差异。当前使用的图片如果接近正方形，某些 mode（如 aspectFit 和 aspectFill）的视觉差异可能不够明显。
例如：
const Demo10 = () => { + // 使用宽高比差异明显的图片以更好地展示不同 mode 的效果 const src = - 'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png' + 'https://example.com/wide-image.png' // 使用一张宽度明显大于高度的图片这是一个可选的改进建议，当前实现已经足够展示功能。
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/packages/avatar/avatar.taro.tsx(3 hunks)src/packages/avatar/demo.taro.tsx(5 hunks)src/packages/avatar/demos/taro/demo10.tsx(1 hunks)src/packages/avatar/doc.taro.md(2 hunks)src/types/spec/avatar/taro.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/packages/avatar/demos/taro/demo10.tsx (1)
src/packages/avatar/avatar.taro.tsx (1)
Avatar(32-177)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: build
- GitHub Check: test
🔇 Additional comments (8)
src/packages/avatar/demo.taro.tsx (1)
16-16: 新增 Demo10 集成看起来不错新增的 Demo10 导入、翻译键和渲染逻辑都正确实现，为新的图片填充模式功能提供了完整的演示支持。
Also applies to: 30-30, 42-42, 55-55, 83-84
src/packages/avatar/avatar.taro.tsx (2)
25-25: 默认值更改为 'scaleToFill' 是正确的选择将默认值从
fit: 'cover'改为mode: 'scaleToFill'符合 Taro Image 组件的原生默认行为，有助于保持向后兼容性。这个选择很合理。
43-43: 使用 Taro 原生 mode 属性解决了小程序兼容性问题将
fit属性替换为mode属性，并在 Image 组件上使用mode={mode}而不是style={{ objectFit: fit }}，正确解决了 CSS objectFit 在小程序平台不生效的问题。这是使用 Taro Image 原生能力的正确做法。Also applies to: 132-132
src/packages/avatar/doc.taro.md (3)
93-99: 新增的图片填充模式文档部分结构清晰新增的文档部分正确引用了 demo10，为用户提供了可视化的示例。
114-114: onClick 签名更新正确反映了 Taro 环境将 onClick 的事件类型从
MouseEvent<HTMLDivElement>更新为ITouchEvent正确反映了 Taro 环境的触摸事件模型，这个更新是必要且正确的。
112-112: Documentation accuracy for mode attribute values confirmedThe mode attribute values listed are accurate and match the Taro Image component specification. The complete set includes 4 primary scaling modes (
scaleToFill,aspectFit,aspectFill,widthFix), 1 additional scaling mode (heightFix), and 9 cropping modes (top,bottom,center,left,right,top left,top right,bottom left,bottom right). These values are consistent with the WeChat mini-program Image component standard that Taro follows.src/types/spec/avatar/taro.ts (2)
1-1: 确认 Taro 4.0.12 中 ImageProps.Mode 类型模式的有效性需要在项目中验证
keyof ImageProps.Mode是否为正确的 TypeScript 类型推导模式。Taro Image 组件的 mode 属性支持 13 种模式，包括 4 种缩放模式（scaleToFill、aspectFit、aspectFill、widthFix）和 9 种裁剪模式（top、bottom、center、left、right、top-left、top-right、bottom-left、bottom-right），但应确保类型定义能够准确推断这些所有可用值。建议在 node_modules/@tarojs/components/types 中查看实际的 ImageProps 和 Mode 类型定义，或通过 TypeScript 编译器验证该模式是否产生预期的类型推导结果。
4-4: 验证完成：TaroAvatarProps 中 fit 属性的移除是正确和必要的
TaroAvatarProps从BaseAvatar中移除 'fit' 属性的设计是合理的。Taro 使用不同的 Image 组件 API，采用mode属性进行图片缩放处理（如scaleToFill），而非 Web 端的 CSSobject-fit属性。代码库中未发现任何遗留的fit属性引用，avatar.taro.tsx 实现完整且与 Taro Image 组件 API 一致。
| icon: '', | ||
| background: '#eee', | ||
| color: '#666', | ||
| fit: 'cover', |
There was a problem hiding this comment.
可以不要直接删除，先加一个 待废弃 标志吧~~
2 participants
🤔 这个变动的性质是？
🔗 相关 Issue
--
💡 需求背景和解决方案
需求背景
Taro 版本的 Avatar 组件中，fit 属性使用 style={{ objectFit: fit }} 实现，但 Taro Image 组件在小程序端不支持 CSS object-fit，需要使用原生的 mode 属性，因此当前 fit 属性不生效。但鉴于这是一个常用的能力，所以需要支持。
解决方案
通过Taro中的 Image mode 属性来支持Avatar组件的图片填充模式。
Taro官方文档中 Image mode 属性相关信息如下：
可以看到API支持程度很好
其他说明
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
文档
✏️ Tip: You can customize this high-level summary in your review settings.